Js中的构造函数有什么用处?
类似于Java或C#中类的实例化,通过构造函数new出来的对象都具有相同的特点(属性)和行为(方法),注意,函数构造返回的是一个对象
- 常规姿势
//声明一个"人"的构造函数,目的是通过new出来的对象都是一个个的具体的"人"
var Person=function(){
//私有属性,该属性new出来的对象时无法获取到的.
var prx="other";
//定义了eye的属性
//在这里eye是实例属性,也就是说,通过new出来的对象都具备eye的属性
this.name="double";
//我们用var 申明了一个私有方法,该方法 不能被 new Person 调用到,
//一般的,我们只需要再内部使用到的方法可最好声明称私有方法.
var prxMethond=function(){
console.log("in prxMethod");
}
//定义了say的方法
//同eye,say是一个实例方法,new出来的对象都有say的方法
this.say=function(){
console.log("hi i am "+this.name);
}
}
//为Person定义了一个原型方法eat,该方法为公共方法,
//每一个通过new Person 实例出来的对象都共享同一个eat方法,
//当然如果不想共享可在新对象中进行重写覆盖
Person.prototype.eat=function(){
console.log(this.name+"eat something...");
}
//定义静态方法,该方法目的在于不用new Person 就能调用该方法,
//我们把不用实例化就能调用的方法叫做静态方法
Person.staticMethod=function(){
console.log("this is static method");
}
在Js中使用new 关键字调用一个函数的问题:
var zhangsan=new Person();
实际上内部是这样的:
var zhangsan={};
zhangsan.__proto__=Person.prototype;
Person.call(zhangsan);
上面三句代码的说明:
- 声明了一个zhangsan的空对象
- 将Person的prototype赋值给zhangsan的proto属性
关于对象的prototype和proto概念如下:
prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。
proto是一个对象拥有的内置属性（每个对象都有一个proto属性），是JS内部使用寻找原型链的属性。
这就是为什么zhangsan可以调用到Person原型(Person.prototype)方法的原因 - 调用Person函数,并且把zhangsan当成是this传入函数中,这就是为什么zhangsan可以调用Person函数定义的this.属性或this.方法的原因
构造函数返回值得问题
任意一个函数都是有返回值得,如果我们不明确的写出返回值 函数默认返回的是undefined.构造函数也是一样
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
console.log("in f");
}
f()
//我们用chrome执行上面代码获取的结果为:
//in f
//undefined
//还是上面的f函数,换一个方式调用:
var fo=new f();
fo
//打印结果为:
//{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}
//说明该方法返回的是:执行完:fo.__proto__=f.prototype绑定关系和f.call(fo)调用的fo对象.
如果我的构造函数有明确的返回值呢?
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
return '123';
}
//非 new调用:
f(); //返回"123"的字符串,这相当于就是调用的一个普通函数
//new 调用
new f();
//返回值同返回undefined时相同的{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}
如果我们的返回值是一个对象呢?
var f=function(){
this.name="f_name";
this.say=function(){
console.log("say");
}
return {"age":25}
}
//非 new调用:
f(); //返回{"age":25}的字符串,这相当于就是调用的一个普通函数
//new 调用
new f();
//返回值是:{age: 25}
也就是说,如果我们的函数明确返回一个对象,则无论是否使用new关键字调用,都获取的是返回的这个对象,这也是很多使用该方法构建模块化的方法和原理
构造函数的调用
结合上面的例子和原理的理解,下面做一些基本的测试
Person().staticMethod()//报错,因为Person()是一般的函数调用,因为Person没有明确的返回值所以默认返回为undefined,所以 调用代码实际上是undefined.方法,所以error了
Person.staticMethod()//打印结果为:this is static method,此次调用的是静态方法,如何定义的就如何调用
Person.prototype.eat()//调用原型链中的方法,但eat中的this,指定的是window 所以打印结果为:undefined eat something...
var zhangsan=new Person()
//先在zhangsan对象中找是否有eat方法发现没有,
//则通过__proto__去找,上面我们提到过,
//new 关键字调用会将: zhangsan,__proto__=Person.prototype,
//所以就会去Person.prototype找eat方法,找到了调用,
//而关于this.name获取到值原因同样是因为new 关键字的 Person.call(zhangsan)的执行操作,
//将Person中的this相关的内容都进行了"copy",其实就是this复制到了zhangsan对象中,
//关于这点我们前面已验证过了.所以zhangsan.name是能找到值的
//输出结果就成了:double eat something...
zhangsan.eat()//double eat something...
zhangsan.name//同上
